<template>
  <div>

    {{dept}}

    <el-form ref="form" :model="form" label-width="80px">

      <el-form-item label="员工名称">
        <el-input v-model="form.demployeeName"></el-input>
      </el-form-item>

      <el-form-item label="部门">
        <el-select v-model="form.ddeptmentId" placeholder="请选择部门">
          <el-option v-for="i in dept" :key="i.deptmentId" :value="i.deptmentId" :label="i.deptmentName" ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="入职时间">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择开始日期" v-model="form.start" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>--<el-date-picker type="date" placeholder="选择结束日期" v-model="form.end" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
        </el-col>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" style="width: 100%">

      <el-table-column prop="demployeeName" label="员工姓名" width="180"></el-table-column>

      <el-table-column prop="demployeeDate" label="入职时间" width="180"></el-table-column>

      <el-table-column prop="demployeeDeptmentName" label="调动前部门"></el-table-column>

      <el-table-column prop="demployeePositionName" label="调动前职位"></el-table-column>

      <el-table-column prop="deptmentName" label="调动后部门"></el-table-column>

      <el-table-column prop="positionName" label="调动后职位"></el-table-column>

      <el-table-column prop="demployeeCause" label="调动原因"></el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">操作</el-button>
        </template>
      </el-table-column>

    </el-table>

<!--    分页-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="tableData.pageNum"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="tableData.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import {queryDeptment, queryRemoveEmployee} from "@/api/removeEmployee";

export default {
    //import引入的组件需要注入到对象中才能使用"
    components: {},
    props: {},
    data() {
      //这里存放数据"

      return {
        tableData:[],
        form:{
          pageNum : 1,
          pageSize : 3,

        },
        dept:[],
        total : 0,
      };
    },
    //计算属性 类似于data概念",
    computed: {},
    //监控data中的数据变化",
    watch: {},
    //方法集合",
    methods: {
      // 每页条数
      handleSizeChange(val) {
        this.form.pageSize = val
        this.queryRemoveEmployee()
      },
      // 当前页
      handleCurrentChange(val) {
        this.form.pageNum = val
        this.queryRemoveEmployee()
      },

      // 查询员工调动表
      queryRemoveEmployee(){
        queryRemoveEmployee(this.form).then(
          res=>{
            this.tableData = res.data.list
            this.total = res.data.total
            // console.log(this.tableData)
          }
        )
      },
      // 查询按钮
      onSubmit(){
        this.queryRemoveEmployee()
      },
      // 查询部门表
      initDept(){
        queryDeptment().then(
          res=>{
            console.log(1111)
            console.log(res)

            this.dept = res.data

            console.log(this.dept)
          }
        )
      },

    },
    //生命周期 - 创建完成（可以访问当前this实例）",
    created() {
      // this.queryDept()
      this.queryRemoveEmployee()
      this.initDept()
    },
    //生命周期 - 挂载完成（可以访问DOM元素）",
    mounted() {
    },
    beforeCreate() {
    }, //生命周期 - 创建之前",
    beforeMount() {
    }, //生命周期 - 挂载之前",
    beforeUpdate() {
    }, //生命周期 - 更新之前",
    updated() {
    }, //生命周期 - 更新之后",
    beforeDestroy() {
    }, //生命周期 - 销毁之前",
    destroyed() {
    }, //生命周期 - 销毁完成",
    activated() {
    } //如果页面有keep-alive缓存功能，这个函数会触发",
  };
</script>
<style scoped>

</style>
